<template>
  <div>
    <div>
      <div id="main" style="width: 500px; height: 500px"></div>
    </div>
  </div>
</template>

<script>
// 记得更改引用的路径
import "../../public/province/fujian";
import "../../public/province/guangdong";
import "../../public/province/shandong";
import anhuiJSON from "../../public/province/anhui.json";

export default {
  data() {
    return {
      mapOption: {},
    };
  },
  mounted() {
    let mapPointData = [];
    mapPointData.push({
      name: "六安",
      value: [116.5, 31.75],
    });
    mapPointData.push({
      name: "马鞍山",
      value: [118.51, 31.68],
    });
    mapPointData.push({
      name: "宿州",
      value: [116.98, 33.63],
    });
    this.initMap(mapPointData);
    this.drawMap();
  },
  methods: {
    //开始画图了

    drawMap() {
      this.$echarts.registerMap("anhui", anhuiJSON, {});
      let myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(this.mapOption);
    },
    initMap(dataGeo) {
      this.mapOption = {
        color: ["#5470c6"],
        tooltip: {
          trigger: "item",
          renderMode: "html",
          // 触发方式
          triggerOn: "click",
          enterable: true,
          backgroundColor: "#fff",
          padding: 0,
          textStyle: {
            color: "#000",
            fontSize: "12",
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        },
        dispatchAction: {
          type: "downplay",
        },
        roam: false,
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            color: ["#000"],
            tooltip: {
              position: "right",
              color: "#000",
              formatter(d) {
                console.log(d);
                return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
              },
            },
            data: [
              {
                name: "六安",
                value: [116.5, 31.75],
              },
              {
                name: "马鞍山",
                value: [118.51, 31.68],
              },
              {
                name: "宿州",
                value: [116.98, 33.63],
              },
            ],
          },
        ],
        geo: {
          show: true,
          map: "anhui",
          type: "map",
          mapType: "anhui",
          roam: false,
          label: {
            normal: {
              // 显示省份标签
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              // 选中后的字体样式
              textStyle: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            color: "#ddb926",
            normal: {
              areaColor: "#8abcd1",
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: "#8abcd1",
              areaColor: "#fff",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      };
    },
  },
};
</script>
<style scoped>
</style>